<script setup lang="ts">
import type { DeptTypeDetailResult } from "@/api/types";
import { ElMessage } from "element-plus";
import { computed, watch } from "vue";
import { IconSelect } from "@/components/ReIcon";
import { $t } from "@/plugins/i18n";
import { isPositiveInteger } from "@/utils/tools";
import { useDeptTypeForm } from "../composables";
import { deptTypeFormRules as rules } from "../utils/rules";

interface Props {
    visible?: boolean;
    editData?: DeptTypeDetailResult | null;
}

interface Emits {
    (e: "update:visible", visible: boolean): void;
    (e: "success"): void;
}

const props = withDefaults(defineProps<Props>(), {
    visible: false,
    editData: null,
});

const emit = defineEmits<Emits>();

const { formRef, formData, submitLoading, resetForm, handleSubmit } = useDeptTypeForm();

/** 用于input-tag组件显示 */
const cascadeLevels = computed(() => {
    return formData.cascadeLevel ? formData.cascadeLevel.map(v => `${v}`) : [];
});

// 计算是否为编辑模式
const isEdit = computed(() => !!props.editData);

/** 对话框标题 */
const dialogTitle = computed(() =>
    isEdit.value ? $t("title.editDepartType") : $t("title.addDepartType"),
);

// 监听弹窗显示状态
watch(
    () => props.visible,
    (val) => {
        if (val) {
            resetForm();
            if (props.editData) {
                // 编辑模式,回填数据
                Object.assign(formData, props.editData);
            }
        }
    },
);

/** 关闭对话框 */
function handleClose() {
    emit("update:visible", false);
}

/** 提交表单 */
function handleFromSubmit() {
    handleSubmit(isEdit.value, () => {
        emit("success");
        handleClose();
    });
}

/** InputTag输入  */
function handleInputTagChange(values?: string[]) {
    const targetValues: string[] = [];
    values?.forEach((v) => {
        if (isPositiveInteger(v)) targetValues.push(v);
        else ElMessage.warning($t("description.onlyPositiveInteger"));
    });
    formData.cascadeLevel = targetValues.map(v => Number(v));
}
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="dialogTitle"
        width="600px"
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="auto"
            label-position="right"
        >
            <el-form-item :label="$t('label.name')" prop="name">
                <el-input
                    v-model.trim="formData.name"
                    :placeholder="$t('placeholder.inputDepartTypeName')"
                />
            </el-form-item>

            <el-form-item :label="$t('label.icon')" prop="icon">
                <IconSelect v-model="formData.icon" class="w-full" />
            </el-form-item>

            <el-form-item :label="$t('label.cascadeLevel')" prop="cascadeLevel">
                <el-input-tag
                    :model-value="cascadeLevels"
                    collapse-tags
                    collapse-tags-tooltip
                    :max-collapse-tags="6"
                    :placeholder="$t('placeholder.inputDepartLevel')"
                    class="w-full"
                    @update:model-value="handleInputTagChange"
                />
            </el-form-item>

            <el-form-item :label="$t('label.remark')" prop="remark">
                <el-input
                    v-model.trim="formData.remark"
                    type="textarea"
                    :rows="3"
                    :placeholder="$t('placeholder.inputRemark')"
                    maxlength="200"
                    show-word-limit
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="text-right">
                <el-button @click="handleClose">
                    {{ $t("button.cancel") }}
                </el-button>
                <el-button
                    type="primary"
                    :loading="submitLoading"
                    @click="handleFromSubmit"
                >
                    {{ $t("button.confirm") }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
